<template>
  <div class="nav-menu">
    <div class="logo">
      <img class="img" src="@/assets/lawyerlogo.png" />
      <h2 class="title" v-show="!isFold">律所管理系统</h2>
    </div>
    <div class="menu">
      <el-menu
        active-text-color="#409EFF"
        background-color="rgb(48, 65, 86)"
        :default-active="$route.path"
        text-color="#C0C4CC"
        :collapse="isFold"
        router
      >
        <el-menu-item index="/dashboard">
          <el-icon><House /></el-icon>
          <template #title><span>首页</span></template>
        </el-menu-item>
        <el-sub-menu v-for="menu in menus" :index="menu.menuId+''">
          <template #title>
            <el-icon>
              <component :is="menu.icon"></component>
            </el-icon>
            <span>{{menu.menuName}}</span>
          </template>
          <el-menu-item v-for="subMenu in menu.subMenus" :index="subMenu.path">
            <template #title>
              <el-icon>
                <component :is="subMenu.icon"></component>
              </el-icon>
              <span>{{subMenu.menuName}}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, onMounted, reactive} from "vue"
import userLoginStore from '@/store/login'
import {fetchMenusByUserId} from "@/api/menu";
import {ElMessage} from "element-plus";

defineProps({
  "is-fold": {
    type: Boolean,
    default: false
  }
})
const loginStore = userLoginStore()
const menus = reactive([])
onMounted(()=>{
  getMenusByUserId(loginStore.id)

})
const getMenusByUserId = (userId:number)=>{
  //调用axios 获取当前用户又拥有的菜单权限
  fetchMenusByUserId(userId).then(res=>{

    menus.push(...res.data)
    console.log("+++++++",menus)
  }).catch(e=>{
    ElMessage.error(e.message||"获取菜单失败")
  })
}
</script>

<style scoped>
/* 样式保持不变 */
.nav-menu {
  height: 100%;
  background-color: rgb(48, 65, 86);
  color: #fff;
}
.logo {
  display: flex;
  height: 60px;
  padding: 0 15px;
  align-items: center;
  border-bottom: 1px solid #1890ff1a;
  background-color: rgb(48, 65, 86)
}
.img {
  height: 32px;
  margin-right: 10px;
}
.title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.el-sub-menu .el-menu-item {
  padding-left: 40px !important;
  background-color: #1f2d3d;
}
.el-sub-menu .el-menu-item:hover {
  background-color: #001529;
}
.el-menu {
  border-right: none;
}
</style>
